import { useIntl } from 'umi';
//箱子概况组件
import BoxCommon from '../../components/BoxCommon/index';

interface IProps {
  data: API.BmsRealtimeDTO;
}

interface itemPops {
  label?: string;
  value?: API.BoxOverViewDTO[keyof API.BoxOverViewDTO];
  unit?: string;
  imgType?: string;
}

export const Info: React.FC<IProps> = ({ data }) => {
  const intl = useIntl();

  const Items: itemPops[] = [
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.CommunicationStatus' }),
      value: data?.bmsOverViewDto?.onlineState,
      imgType: 'state',
    },
    {
      label: intl.formatMessage({ id: 'data.chargeDischargeStatus' }),
      value: data?.bmsOverViewDto?.chargeStatus,
      imgType: 'charge',
    },
    { label: 'SOC', value: data?.bmsOverViewDto?.soc, imgType: 'soc', unit: '%' },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.realTimePower' }),
      value: data?.bmsOverViewDto?.power,
      unit: 'kW',
      imgType: 'reltimepower',
    },
  ];

  const chargeData = {
    dailyChargeElectricity: data?.bmsOverViewDto?.dailyChargeElectricity,
    dailyDisChargeElectricity: data?.bmsOverViewDto?.dailyDisChargeElectricity,
    chargedEnergy: data?.bmsOverViewDto?.inputEnergy,
    dischargedEnergy: data?.bmsOverViewDto?.outputEnergy,
  };

  return (
    <div style={{ padding: '20px 30px', marginBottom: 10 }}>
      <BoxCommon data={data} chargeData={chargeData} Items={Items} />
    </div>
  );
};
